<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火柴人对战</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #f0f0f0;
        }
        canvas {
            display: block;
            margin: 0 auto;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Stickman {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.isAttacking = false;
                this.isEating = false;
                this.isHit = false;
                this.animationFrame = 0;
            }

            draw() {
                // 计算抖动偏移量
                const shakeOffset = this.isHit ? Math.sin(this.animationFrame * 0.5) * 20 : 0;

                // 击打特效
                if (this.isAttacking && this.animationFrame < 10) {
                    ctx.beginPath();
                    ctx.arc(this.x + 80 + shakeOffset, this.y + 30, 10 + this.animationFrame * 2, 0, Math.PI * 2);
                    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
                    ctx.fill();
                }

                // 身体
                ctx.beginPath();
                ctx.moveTo(this.x + shakeOffset, this.y);
                ctx.lineTo(this.x + shakeOffset, this.y + 100);
                ctx.strokeStyle = this.color;
                ctx.lineWidth = 5;
                ctx.stroke();

                // 头部
                ctx.beginPath();
                ctx.arc(this.x + shakeOffset, this.y - 20, 20, 0, Math.PI * 2);
                ctx.stroke();

                // 疼痛表情（蓝色火柴人）
                if (this.color === 'blue' && this.isHit) {
                    // 眼睛
                    ctx.beginPath();
                    ctx.arc(this.x - 10 + shakeOffset, this.y - 25, 3, 0, Math.PI * 2);
                    ctx.fillStyle = 'black';
                    ctx.fill();
                    ctx.beginPath();
                    ctx.arc(this.x + 10 + shakeOffset, this.y - 25, 3, 0, Math.PI * 2);
                    ctx.fill();

                    // 嘴巴
                    ctx.beginPath();
                    ctx.arc(this.x + shakeOffset, this.y - 15, 5, Math.PI * 0.8, Math.PI * 1.2);
                    ctx.strokeStyle = 'black';
                    ctx.stroke();
                }

                // 手臂
                ctx.beginPath();
                ctx.moveTo(this.x + shakeOffset, this.y + 20);
                if (this.isAttacking && this.animationFrame < 10) {
                    ctx.lineTo(this.x + 80 + shakeOffset, this.y + 30);
                } else if (this.isEating) {
                    ctx.lineTo(this.x + 30 + shakeOffset, this.y + 30 + Math.sin(this.animationFrame * 0.2) * 10);
                } else if (this.isHit) {
                    ctx.lineTo(this.x + 30 + shakeOffset + Math.sin(this.animationFrame * 0.5) * 10, this.y + 50);
                } else {
                    ctx.lineTo(this.x + 30 + shakeOffset, this.y + 50);
                }
                ctx.stroke();

                // 腿
                ctx.beginPath();
                ctx.moveTo(this.x + shakeOffset, this.y + 100);
                ctx.lineTo(this.x - 30 + shakeOffset, this.y + 150);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(this.x + shakeOffset, this.y + 100);
                ctx.lineTo(this.x + 30 + shakeOffset, this.y + 150);
                ctx.stroke();

                // 食物
                if (this.isEating) {
                    ctx.beginPath();
                    ctx.arc(this.x + 35 + shakeOffset, this.y + 30, 5, 0, Math.PI * 2);
                    ctx.fillStyle = 'green';
                    ctx.fill();

                    // 添加食物光泽效果
                    ctx.beginPath();
                    ctx.arc(this.x + 37 + shakeOffset, this.y + 28, 2, 0, Math.PI * 2);
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
                    ctx.fill();

                    // 添加食物阴影
                    ctx.beginPath();
                    ctx.arc(this.x + 33 + shakeOffset, this.y + 32, 5, 0, Math.PI * 2);
                    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
                    ctx.fill();
                }
            }

            attack() {
                this.isAttacking = true;
                this.animationFrame = 0;
            }

            eat() {
                this.isEating = true;
                this.animationFrame = 0;
            }

            hit() {
                this.isHit = true;
                this.animationFrame = 0;
            }

            update() {
                if (this.isAttacking || this.isEating || this.isHit) {
                    this.animationFrame++;
                    if (this.animationFrame >= 40) {
                        this.isAttacking = false;
                        this.isEating = false;
                        this.isHit = false;
                    }
                }
            }
        }

        const stickman1 = new Stickman(canvas.width / 2 - 100, canvas.height / 2, 'red');
        const stickman2 = new Stickman(canvas.width / 2 + 100, canvas.height / 2, 'blue');

        // 创建按钮容器
        const buttonContainer = document.createElement('div');
        buttonContainer.style.position = 'absolute';
        buttonContainer.style.bottom = '20px';
        buttonContainer.style.left = '50%';
        buttonContainer.style.transform = 'translateX(-50%)';
        document.body.appendChild(buttonContainer);

        // 击打按钮
        const attackButton = document.createElement('button');
        attackButton.innerText = '击打';
        attackButton.style.marginRight = '10px';
        attackButton.style.padding = '15px 30px';
        attackButton.style.fontSize = '18px';
        attackButton.style.backgroundColor = '#ff4444';
        attackButton.style.color = 'white';
        attackButton.style.border = 'none';
        attackButton.style.borderRadius = '8px';
        attackButton.style.cursor = 'pointer';
        attackButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
        attackButton.style.transition = 'all 0.3s ease';
        attackButton.addEventListener('mouseover', () => {
            attackButton.style.transform = 'translateY(-2px)';
            attackButton.style.boxShadow = '0 6px 8px rgba(0, 0, 0, 0.15)';
        });
        attackButton.addEventListener('mouseout', () => {
            attackButton.style.transform = 'translateY(0)';
            attackButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
        });
        attackButton.addEventListener('click', () => {
            stickman1.attack();
            stickman2.hit();
        });
        buttonContainer.appendChild(attackButton);

        // 吃饭按钮
        const eatButton = document.createElement('button');
        eatButton.innerText = '吃饭';
        eatButton.style.padding = '15px 30px';
        eatButton.style.fontSize = '18px';
        eatButton.style.backgroundColor = '#44aaff';
        eatButton.style.color = 'white';
        eatButton.style.border = 'none';
        eatButton.style.borderRadius = '8px';
        eatButton.style.cursor = 'pointer';
        eatButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
        eatButton.style.transition = 'all 0.3s ease';
        eatButton.addEventListener('mouseover', () => {
            eatButton.style.transform = 'translateY(-2px)';
            eatButton.style.boxShadow = '0 6px 8px rgba(0, 0, 0, 0.15)';
        });
        eatButton.addEventListener('mouseout', () => {
            eatButton.style.transform = 'translateY(0)';
            eatButton.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
        });
        eatButton.addEventListener('click', () => {
            stickman1.eat();
            stickman2.eat();
        });
        buttonContainer.appendChild(eatButton);

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            stickman1.draw();
            stickman2.draw();
            stickman1.update();
            stickman2.update();
            requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>
</html>